<template>
  <el-tabs type="border-card" class="demo-tabs">
    <el-tab-pane label="仪表仪计费类">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>周期计费类</span>
        </span>
      </template>
      <div class="formdiv">
        <el-form :model="formInline" class="demo-form-inline">
          

          <el-form-item label="项目名称" label-width="120px" style="width: 480px;">
            <el-input v-model="formInline.jifeiname" placeholder="Approved by" clearable />
          </el-form-item>
		  
		  <el-form-item label="计费标准" label-width="120px" style="width: 480px;">
		    <el-input v-model="formInline.freightbasis" placeholder="Approved by" clearable />
		  </el-form-item>

          <el-form-item label="单位" label-width="120px">
            <el-select
              v-model="formInline.company"
              placeholder="Activity zone"
              clearable
            >
              <el-option label="次" value="次" />
              <el-option label="月" value="月" />
            </el-select>
          </el-form-item>
		  
		  <el-form-item label="计费类型" label-width="120px">
		    <el-select
		      v-model="formInline.charge_type"
		      placeholder="Activity zone"
		      clearable
		    >
		      <el-option label="单次" value="单次" />
		      <el-option label="周期" value="周期" />
		    </el-select>
		  </el-form-item>

		  
		  <span class="lie">
			例：如果“垃圾费”选用“收本期费用”，5月账单对应的垃圾费用计费周期为“5月1日-5月30日” 如果“垃圾费”选用“收上期费用”，
			<br>
			5月账单对应的垃圾费用计费周期为“4月1日-4月30日”不选择则默认”收本期费用“
		  </span>
		  
		  <br />
		  
		  <el-form-item label="备注" label-width="120px" style="width: 480px;">
		    <el-input v-model="formInline.bz" placeholder="Approved by" clearable />
		  </el-form-item>
		  
		  
          
		  <div class="anniu">
		    <el-form-item>
			  <el-button type="primary" class="qux">取消</el-button>
		      <el-button type="primary" @click="onSubmit" class="queding">确定</el-button>
		    </el-form-item>
		  </div>
          
        </el-form>
      </div>
    </el-tab-pane>
    
	
  </el-tabs>
  
</template>

<script lang="ts" setup>
import { Calendar } from '@element-plus/icons-vue'
import { reactive,ref } from 'vue'
import $http from '../router/AxiosApi.js';

const formInline = reactive({
  jifeiname: '',
  freightbasis: '',
  company: '',
  charge_type: '',
  bz:''
})

const onSubmit = () => {
  console.log(formInline)
  $http.post("FeiYong/addbillingltems", formInline).then((res) => {
  	Object.assign(formInline, res.data);
  	console.log(formInline);
	formInline
  });
   // 清空表单
    Object.keys(formInline).forEach(key => {
      formInline[key] = ''; // 将每个属性设置为空字符串
    });
}
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 16px;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 2px;
}

.formdiv {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 10px; 
}

.demo-form-inline .el-form-item {
  margin-bottom: 15px; /* 调整表单项之间的间距 */
}

.demo-form-inline .el-form-item .el-input,
.demo-form-inline .el-form-item .el-select,
.demo-form-inline .el-form-item .el-date-picker {
  width: 220px; /* 设置表单项的宽度 */
}

.demo-form-inline .el-form-item .el-input {
  width: 100%; /* 让输入框宽度充满父容器 */
}



.form-row {
  display: flex;
  align-items: center; /* Optional: Adjust alignment as needed */
  margin-left: 120px;
}
.form-rowtow {
  display: flex;
  align-items: center; /* Optional: Adjust alignment as needed */
  margin-left: 38px;
}

.form-row .el-form-item {
  margin-right: 20px; /* Optional: Adjust spacing between form items */
}

.form-row .el-form-item:last-child {
  margin-right: 0; /* Ensure last item doesn't have extra margin */
}

.lie{
	display: flex;
	align-items: center; /* Optional: Adjust alignment as needed */
	margin-left: 120px;
	font-size: 12px;
	color: #ccc;
	
	
}
.tabs-container {
  width: 500px;
}

.anniu{
	display: flex; 
	justify-content: flex-end; 
	align-items: flex-end; 
	height: 100px;
	margin-right: 26px;
}
.queding{
	background-color: #00C36D;
	height: 40px;
	width: 100px;
}
.qux{
	background-color: rgb(250, 250, 250);
	height: 40px;
	width: 100px;
	color: black;
}
</style>